import React from 'react'
import {matchRoutes, Navigate, useLocation} from 'react-router-dom'
import {routes} from '../../router'
import type {RootState} from '../../store'
import {useAppDispatch} from '../../store'
import type {Infos} from '../../store/modules/users'
import {infosAction, updateInfos, updateMark} from '../../store/modules/users'
import {useSelector} from 'react-redux'
import _ from 'lodash'

interface BeforeEachProps {
	children?: React.ReactNode
}

export default function BeforeEach(props: BeforeEachProps) {
	const token = useSelector((state: RootState) => state.users.token)
	const infos = useSelector((state: RootState) => state.users.infos)
	const mark = useSelector((state: RootState) => state.users.mark)
	const dispatch = useAppDispatch()
	const location = useLocation()
	const matchs = matchRoutes(routes, location)

	if (Array.isArray(matchs)) {
		const meta = matchs[matchs.length - 1].route.meta
		const name = matchs[matchs.length - 1].route.name
		if (meta?.auth && _.isEmpty(infos) && !mark) {
			if (token) {
				dispatch(updateMark(true))
				dispatch(infosAction()).then((action) => {
					const { errcode, infos } = (action.payload as { [index: string]: unknown }).data as {
						[index: string]: unknown
					}
					if (errcode === 0) {
						dispatch(updateMark(true))
						dispatch(updateInfos(infos as Infos))
					}
				})
			} else {
				return <Navigate to='/login' />
			}
		} else if (Array.isArray(infos.permission) && !infos.permission.includes(name)) {
			return <Navigate to='/403' />
		}
	}
	if (token && location.pathname === '/login') {
		return <Navigate to='/' />
	}
	return <>{props.children}</>
}
